body {
font-family: 'Hind Siliguri', sans-serif;	
scroll-behavior:smooth;
}

.brand-logo{
font-family: 'Dancing Script', cursive;
}

.lighten-1  {
background-color:#33ccff !important;
}

.col-icon p{
 padding:32px;
 text-align:center;
 border:1px #dddddd solid;
 margin-top:35px;
 background:#fafafa;
 border-radius:1px;
}

#download-button{
margin-top:30px;
}

.header-banner{
height:800px;	
background-image: url("../img/background2.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.header-banner h5{
margin-top:5px;
}

.header-container h1{
font-size:75px;
}

.header-container{
margin-top:	200px;
}

.header-index-sombre{
background-color:rgba(50, 50, 50, 0.5);	
height: 800px;
}

.waves-light{
background-color:#33ccff !important;	
}

#porfolio,#features,#contact{
width:100%;	
}

.col-icon{
margin-top:20px;	
padding: 30px 10px 0px;
background:#f7f7f7;
border-bottom:#33ccff 5px solid;
border-top:#33ccff 5px solid;
border-right: #dedede 1px solid;
border-left: #dedede 1px solid;
}
/*
.container-icon{
width:86% !important;
}

.container-icon,.portfolio-container{
width:86% !important;
}
*/

.portfolio-container,.container-icon{
/*margin:2% 7% 6%;*/
margin:2% auto 6%;
max-width:1124px!important;
}

.material-icons{
font-size:60px;
}

.parallax-img{
background-image: url("../img/background1.jpg");
} 
.parallax-container .section {
 width: 100%;
}


.parallax-container {
height: 600px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.parallax-container h3 {
font-size:50px;
margin-bottom:25px;
}

#index-sombre{
background-color:rgba(50, 50, 50, 0.5);
color:white!important;
padding:100px;
}

.row{
width:100%;
margin:auto;
}

.prj-titre{
margin-top: 20px !important;
}

.prj-logo{
width:100%;
}

.col-icon h5{

border-bottom:#dedede 2px solid;
padding-bottom:30px;
    
}

#porfolio{
background:#ffffff;
border-top:#ededed 10px solid;
}

#porfolio h2{
font-size:40px;
}

#porfolio p{ 
padding:40px 20px;
text-align:justify;
}
.loupe-icons{
color:#ffffff;	
}

.page-footer{
background-color:rgba(26, 0, 26, 1);	
}

#col-projets1,#col-projets2, #col-projets3, #col-projets4{
margin-top:15px;
}

#col-projets1 img,#col-projets2 img,#col-projets3 img, #col-projets4 img{
width:110%;		
}

.form-container{
max-width:900px;
margin:3% auto 8%;
/*width:72%;
margin:3% 14% 8%;*/
background: #f8f8f8;
padding:50px;
border-bottom:#33ccff 8px solid;
border-top:#33ccff 8px solid;
border-right: #dedede 1px solid;
border-left: #dedede 1px solid;
}


#index-contact label{
color:black!important;
font-size:20px;
}

#index-contact{
background:#fafafa;
border:#ddd 1px solid;
padding:50px;
margin-top:20px;
}

#index-contact input{
color:black!important;
font-size:20px;
}

.contact-title{
font-size:40px;
color:black;
margin-bottom:45px;
margin-top:40px;
padding-bottom:50px;
border-bottom:2px #dedede solid;
}

.logo-mail{
margin-bottom:-20px;
width:100%;
}

.submit{
margin-top:20px;    
width:100%;
}

@media only screen and (max-width : 1024px) {

	#col-features1,#col-features2,#col-features3{	
	width:50%!important;	
	}
	
}

@media only screen and (max-width : 800px) {
	#index-sombre{
	padding:50px;
	}
	
	#col-features1,#col-features2,#col-features3{	
	width:100%!important;	
	}
	
	 .form-container{
    width:100%;
    margin-left:0;
    margin-right:0;
    }
	
}

@media only screen and (max-width : 500px) {

	.hovereffect:hover h5,.hovereffect:hover a.info {
	margin-top:25px;
	}
	#index-sombre{
	 padding:5px;
	}
	
	.parallax-container h3 {
	 font-size:30px;
	 margin-bottom:15px;
	}
	
	.parallax-container p {
	 font-size:15px;	 
	}
	
	#index-contact{
    padding:10px;
    }
    
    .form-container{
    padding:10px;
    }
    
   

	
}


@media only screen and (max-width : 300px) {

	.hovereffect:hover h5,.hovereffect:hover a.info {
	margin-top:12px;
	}
	

    
    .form-container{
    padding:5px;
    }
	
	
	
	
}

@media  screen and (min-width: 1419px) {
	 .header-banner h1{	
	margin-top:330px;
	}

	.header-banner,.header-index-sombre{
	height:900px;
	}
}

@media  screen and (min-width: 1919px) {
	.header-banner h1{	
	margin-top:370px;
	}

	.header-banner,.header-index-sombre{
	height:1080px;
	}  
}